<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>AnnoLex -- Lexical Annotation and Correction</title>
  <style type ="text/css">
    html { 
      padding:0px;
      margin:0px;
    }
    body {
      background-color: #003377;
      font-size: 12px;
      font-family: Verdana, Arial, Sans-Serif;
      color:black;  
      padding:0px 20px;
      margin:0px;
    }
    div {
      -webkit-border-radius: 10px;
      border-radius: 10px;
    }
    a {text-decoration: none;}
    #topbar {
      width:100%;
      margin:2px 0px 5px 0px;
      background-color: #003377;
      font-size: 14px;
      color: white;
    }
    #topbar a:link, #topbar a:visited {color:white;}
    #topbar a {padding:0 7px;}
    #topbar a:hover {color:#fff; font-weight: bold;}
    #main {
      background-color:#003377;
    }
    #main #leftbar {
      float: left;
    }
    #main #search, #editbox {
      width: 270px;
      border-left:1px dotted #000; 
      border-right:1px dotted #000; 
      border-top:1px dotted #000; 
      border-bottom:1px dotted #000;
      background-color:#99ccff;
      margin:0px 20px 5px 0px;
    }
    #main #image_control {
      width:270px;
      background-color: #003377;
      font-size: 12px;
      color: white;
    }
    #image_control a:link, #image_control a:visited {color:white;}
    #image_control a {padding:0 2px;}
    #image_control a:hover {color:#fff; font-weight: bold;}
    #main #rightbar {
      float: right;
    }
    #main #reviewchoices {
      border-left:1px dotted #000; 
      border-right:1px dotted #000; 
      border-top:1px dotted #000; 
      border-bottom:1px dotted #000;
      background-color:#99ccff;
      margin:0px 0px 5px 0px;
    }
    table.wordlist {
      border-width: 1px;
      border-style: outset;
      border-color: black;
      background-color: white;
      -webkit-border-radius: 7px;
      border-radius: 7px;
    }
    table.wordlist th {
      border-width: 1px;
      padding: 1px;
      border-style: inset;
      border-color: gray;
      background-color: white;
      -webkit-border-radius: 4px;
      border-radius: 4px;
    }
    table.wordlist tr {
      background-color: white;
       -webkit-border-radius: 4px;
      border-radius: 4px;
    }
    table.wordlist td {
      border-width: 1px;
      padding: 1px;
      border-style: inset;
      border-color: gray;
      -webkit-border-radius: 2px;
      border-radius: 2px;
    }
    table.wordlist a:hover {font-weight: bold;}
    #pagination {
      background-color: #003377;
      font-size: 14px;
      color: white;
      text-align: right;
    }
    table.about {
      border-width: 1px;
      border-style: outset;
      border-color: black;
      background-color: white;
      -webkit-border-radius: 12px;
      border-radius: 12px;
      width:625px;
      padding: 20px;
    }
    #pagination a:link, #pagination a:visited {color:white;}
    #pagination a {padding:0 7px;}
    #pagination a:hover {color:#fff; font-weight: bold;}

    select#id_textid {
      width: 150px
    }
  </style>
</head>

<body>
  <div id ="topbar">
     <a href="/"> Correct </a> &middot; 
     <a href="/review/"> Review </a> &middot; 
     <a href="/about/"> About </a> &middot; 
     {% if user.is_authenticated %}
     <a href="/accounts/logout/"> Log out {{ user.username }} </a>
     
     {% else %}
     <a href="/accounts/login/?next=/"> Login </a>
    {% endif %}
  </div>

{% block content %}{% endblock %}

</body>
</html>
